<template>
  <div ref="charts" class="charts" />
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/mixins/resize'

export default {
  name: 'PieChart',
  mixins: [resize],
  mounted() {
    const myEcharts = echarts.init(this.$refs.charts)
    myEcharts.setOption({
      title: {
        text: '家用电器',
        textStyle: {
          fontSize: 14
        },
        subtext: 312,
        subtextStyle: {
          fontSize: 20
        },
        left: 'center',
        top: '44%'
      },
      series: [
        {
          type: 'pie',
          data: [
            {
              name: '家用电器',
              value: 312
            },
            {
              name: '食用酒水',
              value: 336
            },
            {
              name: '个护健康',
              value: 342
            },
            {
              name: '服饰箱包',
              value: 41
            },
            {
              name: '母婴产品',
              value: 188
            },
            {
              name: '其他',
              value: 94
            }
          ],
          // 半径
          radius: ['40%', '80%'],
          itemStyle: {
            borderWidth: 2,
            borderColor: '#fff'
          },
          label: {
            formatter: '{b}: {c}'
          }
        }
        // 问题：数据会重叠
        // {
        //   type: 'pie',
        //   data: [
        //     {
        //       name: '家用电器',
        //       value: 312
        //     },
        //     {
        //       name: '食用酒水',
        //       value: 336
        //     },
        //     {
        //       name: '个护健康',
        //       value: 342
        //     },
        //     {
        //       name: '服饰箱包',
        //       value: 41
        //     },
        //     {
        //       name: '母婴产品',
        //       value: 188
        //     },
        //     {
        //       name: '其他',
        //       value: 94
        //     }
        //   ],
        //   // 半径
        //   radius: ['40%', '80%'],
        //   itemStyle: {
        //     borderWidth: 2,
        //     borderColor: '#fff'
        //   },
        //   label: {
        //     formatter: '{b}: {c}',
        //     position: 'center'
        //   }
        // }
      ]
    })
    this.myEcharts = myEcharts

    myEcharts.on('mouseover', function(params) {
      const { name, value } = params.data

      myEcharts.setOption({
        title: {
          text: name,
          subtext: value
        }
      })
    })
  }
}
</script>

<style lang="sass" scoped>
.charts
  width: 100%
  height: 100%
</style>
